<template>
  <div class="ranking-table">
    <div class="table-container">
      <table>
        <thead>
        <tr>
          <th >序号</th>
          <th>专利名称</th>
          <th>专利类型</th>
          <th>专利状态</th>
        </tr>
        </thead>

        <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.rank }}</td>
          <td :title="item.company">{{ item.company }}</td>
          <td :title="item.patentCount">{{ item.patentCount }}</td>
          <td>{{ item.date }}</td>
        </tr>
        </tbody>

      </table>

    </div>
  </div>
</template>

<script>
export default {
  name: 'jkjHdSsQk',
  data() {
    return {
      tableData: [
        { rank: 1, company: '一种陡长斜井防坠运输车', patentCount: 262222, date:'2024-09-02' },
        { rank: 2, company: '一种深竖井压力钢管吊装装置', patentCount: 20222222222222222222223123213, date:'2024-09-02' },
        { rank: 3, company: '一种用于吊装盾构机刀盘的可拆卸刀盘吊装装置', patentCount: 13213123125, date:'2024-09-02' },
        { rank: 4, company: '一种桥梁建造临时辅助支架', patentCount: 132132135, date:'2024-09-02' },
        { rank: 5, company: '一种整体式墩柱钢筋绑扎平台及搭设方法', patentCount: 1213135, date:'2024-09-02' },
        { rank: 6, company: '一种整体式墩柱钢筋绑扎平台及搭设方法', patentCount: 12132135, date:'2024-09-02' },
        { rank: 7, company: '专利名字', patentCount: 12135, date:'2024-09-02' },
        { rank: 8, company: '专利名字', patentCount: 15, date:'2024-09-02'},
        { rank: 9, company: '专利名字', patentCount: 15, date:'2024-09-02' },
        { rank: 10, company: '专利名字', patentCount: 15, date:'2024-09-02' },
        { rank: 11, company: '专利名字', patentCount: 15, date:'2024-09-02' },
        { rank: 12, company: '专利名字', patentCount: 15, date:'2024-09-02' },
        { rank: 13, company: '专利名字', patentCount: 15, date:'2024-09-02' },
        { rank: 14, company: '专利名字', patentCount: 15, date:'2024-09-02' },
        { rank: 15, company: '专利名字', patentCount: 15, date:'2024-09-02' },
        { rank: 16, company: '专利名字', patentCount: 15, date:'2024-09-02' },
        { rank: 17, company: '专利名字', patentCount: 15, date:'2024-09-02' },
        { rank: 18, company: '专利名字', patentCount: 15, date:'2024-09-02' },
        { rank: 19, company: '专利名字', patentCount: 15, date:'2024-09-02' },
        { rank: 20, company: '专利名字', patentCount: 15, date:'2024-09-02' },
        // 更多的数据项...
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.ranking-table {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.table-container {

  height: 100%;
  overflow-y: auto;
  //overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;

  thead {
    background-color: #d0cece;
    color: #000000;
    font-weight: bold;

    th {
      position: sticky;
      top: 0;
      z-index: 1;
      background-color: #d0cece;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      min-width: 20px; // 最小宽度
      max-width: 50px; // 最大宽度
    }
  }

  tbody {
    tr {
      &:nth-child(even) {
        background-color: #f2f2f2;
      }

      td {
        padding: 8px;
        border-bottom: 1px solid #ddd;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 20px; // 最小宽度
        max-width: 50px; // 最大宽度
      }
    }
  }
}
.table-body {
  overflow-y: auto;
  max-height: calc(100% - 30px); /* 调整表身的最大高度，留出表头的空间 */
}

::v-deep .table-container::-webkit-scrollbar {
  width: 4px; // 滚动条宽度
}

::v-deep .table-container::-webkit-scrollbar-track {
  border-radius: 10px; // 滚动条轨道的圆角
  background-color: #e0e0e0; // 轨道背景颜色
}

::v-deep .table-container::-webkit-scrollbar-thumb {
  border-radius: 10px; // 滚动条滑块的圆角
  background-color: #5bc0de; // 滑块背景颜色
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); // 滑块阴影效果
}

/* 响应式设计 */
//67%
@media screen and (min-width: 2801px) and (max-width: 2900px) {
  .ranking-table {
    height: 580px;
    //border: 1px solid #21deff;
  }
}
@media screen and (min-width: 2701px) and (max-width: 2800px) {
  .ranking-table {
    height: 560px;
    //border: 1px solid #21deff;
  }
}
@media screen and (min-width: 2601px) and (max-width: 2700px) {
  .ranking-table {
    height: 540px;
    //border: 1px solid #a2f572;
  }
}
//75%
@media screen and (min-width: 2501px) and (max-width: 2600px) {
  .ranking-table {
    height: 520px;
    //border: 1px solid #8c00ff;
  }
}
@media screen and (min-width: 2401px) and (max-width: 2500px) {
  .ranking-table {
    height: 510px;
    //border: 1px solid #a2f572;
  }
}
//80%
@media screen and (min-width: 2301px) and (max-width: 2400px) {
  .ranking-table {
    height: 490px;
    //border: 1px solid #a2f572;
  }
}
@media screen and (min-width: 2201px) and (max-width: 2300px) {
  .ranking-table {
    height: 460px;
    //border: 1px solid #f00;
  }
}
//90%
@media screen and (min-width: 2101px) and (max-width: 2200px) {
  .ranking-table {
    height: 420px;
    //border: 1px solid #003dff;
  }
}
@media screen and (min-width: 2001px) and (max-width: 2100px) {
  .ranking-table {
    height: 400px;
    //border: 1px solid #003dff;
  }
}
//100%
@media screen and (min-width: 1901px) and (max-width: 2000px) {
  .ranking-table {
    height: 380px;
    //border: 1px solid #f00;
  }
}
@media screen and (min-width: 1801px) and (max-width: 1900px) {
  .ranking-table {
    height: 350px;
    //border: 1px solid #f00;
  }
}
//110%
@media screen and (min-width: 1701px) and (max-width: 1800px) {
  .ranking-table {
    height: 330px;
    //border: 1px solid #55beff;
  }
}
@media screen and (min-width: 1601px) and (max-width: 1700px) {
  .ranking-table {
    height: 310px;
    //border: 1px solid #ffd837;
  }
}
//125%
@media screen and (min-width: 1501px) and (max-width: 1600px) {
  .ranking-table {
    height: 290px;
    //border: 1px solid #ff30e3;
  }
}
@media screen and (min-width: 1401px) and (max-width: 1500px) {
  .ranking-table {
    height: 260px;
    //border: 1px solid #304eff;
  }
}
@media screen and (min-width: 1301px) and (max-width: 1400px) {
  .ranking-table {
    height: 240px;
    //border: 1px solid #304eff;
  }
}
//150%
@media screen and (min-width: 1201px) and (max-width: 1300px) {
  .ranking-table {
    height: 220px;
    //border: 1px solid #ff30e3;
  }
}
@media screen and (min-width: 1101px) and (max-width: 1200px) {
  .ranking-table {
    height: 200px;
    //border: 1px solid #ff30e3;
  }
}

@media screen and (min-width: 1001px) and (max-width: 1100px) {
  .ranking-table {
    height: 180px;
    //border: 1px solid #8bff87;
  }
}



@media screen and (max-width: 767px) {
  .ranking-table {
    height: 160px;
    //border: 1px solid #8bff87;
  }
}
</style>
